<template>
  <div class="pageContainer">
    <h3 style="margin-bottom: 30px;">用户库</h3>
    <div class="oneLineFlex" style="flex-wrap: wrap;">
      <div class="oneLineFlex" style="margin-right: 40px;">
        <div class="formLabel">用户编号:</div>
        <el-input v-model="param.userNo" placeholder="请输入编号" class="inputStyle" />
      </div>
      <div class="oneLineFlex" style="margin-right: 40px;">
        <div class="formLabel">称呼:</div>
        <el-input v-model="param.userName" placeholder="请输入称呼"  class="inputStyle" />
      </div>
      <div class="oneLineFlex" style="margin-right: 40px;">
        <div class="formLabel">客户分类:</div>
        <el-select v-model="param.kind" placeholder="请选择客服分类" class="inputStyle" >
          <el-option  label="全部" :value="null" ></el-option>
          <el-option  label="客户" value="0" ></el-option>
          <el-option  label="渠道" value="1" ></el-option>
        </el-select>
      </div>
      <div class="oneLineFlex" style="margin-right: 40px;">
        <div class="formLabel">标签:</div>
        <el-select v-model="param.tags" multiple filterable clearable placeholder="请选择标签(可多选)">
          <el-option :value="item.value" v-for="item in tagOptions" :label="item.label"></el-option>
        </el-select>
      </div>
      <div class="oneLineFlex">
        <div class="basicSearchLightBtn"  @click="getTableData">
          <img src="@/assets/svg/white-search.svg"  style="margin-right: 8px;" alt="">
          <div>查询</div>
        </div>
        <div class="basicSearchBtn" style="margin-left: 8px;" @click="reset">
          <img src="@/assets/svg/reset.svg" style="margin-right: 8px;"  alt="">
          <div>重置</div>
        </div>
      </div>
    </div>
    <div style="margin-top:16px;">
      <el-table :data="tableData" fit  class="tableAuto" tableLayout="auto">
        <el-table-column label="用户编号" prop="userNo"  ></el-table-column>
        <el-table-column label="头像" >
          <template slot-scope="{row}">
            <img src="row.userImage" style="width: 40px;height: 40px;border-radius: 50%;" />
          </template>
        </el-table-column>
        <el-table-column label="称呼" prop="userName"></el-table-column>
        <el-table-column label="客户分类" >
          <template slot-scope="{row}">
            <div style="font-size: 14px;color: #333333;">
              <div v-if="row.kind === '0'">客户</div>
              <div v-else>渠道</div>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="客户等级" prop="level" ></el-table-column>
        <el-table-column label="二维码">
          <template slot-scope="{row}">
            <div v-if="row.qrcode" @click="downloadFile(row.qrcode)" style="cursor: pointer;" class="basicColorStyle">下载</div>
            <div v-else>无</div>
          </template>
        </el-table-column>
        <el-table-column label="标签" >
          <template slot-scope="{row}">
            <div v-for="item in row.tags">{{item}}</div>
          </template>
        </el-table-column>
        <el-table-column label="服务数" prop="orders" ></el-table-column>
        <el-table-column label="操作"   width="280px" >
          <template slot-scope="{row}">
            <div class="action" >
              <el-button type="text" class="basicColorStyle" @click="handleCoupons(row)" >定向发券</el-button>
              <el-divider direction="vertical"></el-divider>
              <el-button type="text"  class="basicColorStyle" @click="handleShowSetTag(row)">打标签</el-button>
              <el-divider direction="vertical"></el-divider>
              <el-popconfirm
                  v-if="row.kind == 1"
                  title="确定取消渠道吗?"
                  @onConfirm="cancelChannel(row)"
                  >
                <el-button slot="reference" type="text" class="basicColorStyle" >取消渠道</el-button>
              </el-popconfirm>

              <el-button v-else type="text" class="basicColorStyle"  @click="handleSetChannel(row)">设置渠道</el-button>
              <el-divider direction="vertical" style="color: #dddddd"></el-divider>
              <el-popconfirm title="确定拉黑吗？" v-if="row.status === 1" @onConfirm="handleSetStatus(row, 0)">
                <el-button slot="reference" type="text" class="warningColor">拉黑</el-button>
              </el-popconfirm>
              <el-popconfirm title="确定恢复吗？" v-else @onConfirm="handleSetStatus(row,1)">
                <el-button slot="reference" type="text" class="defaultTextColor" >恢复</el-button>
              </el-popconfirm>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div style="margin-top:40px;">
      <el-pagination
          style="text-align: right; margin-top:20px;"
          @current-change="handleSizeChange"
          :current-page.sync="pageNo"
          :page-size="pageSize"
          layout="total, prev, pager, next"
          :total="total"></el-pagination>
    </div>
    <SetTag v-if="showSetTag" :id="target.userNo" kind="custom" :tags="target.tags" @close="handleClose"></SetTag>
    <el-dialog
        title="设置渠道"
        :visible="showSetChannel"
        width="560px"
        :show-close="false"
        :close-on-click-modal="false"
       >
      <div style="display: flex;align-items: center">
        <div class="label" style=" margin-left: 32px;">设置渠道:</div>
        <el-select v-model="selectChannel"  filterable class="input-class">
          <el-option v-for="item in channelOptions" :value="item.value" :label="item.label"></el-option>
        </el-select>
      </div>
      <span slot="footer" class="dialog-footer" >
        <button type="primary" @click="setChannel" class="button">确定</button>
        <button @click="showSetChannel = false" class="cancel">取消</button>
    </span>
    </el-dialog>


    <el-dialog
        title="定向发券"
        :visible="couponDialog"
        width="560px"
        :show-close="false"
        :close-on-click-modal="false"
       >
      <div style="display: flex;align-items: center">
          <div class="coupon-class" >优惠券:</div>
            <el-select v-model="selectCoupon"  filterable class="input-class" placeholder="请选择优惠券" >
              <el-option v-for="item in couponList" :value="item.value" :label="item.label" ></el-option>
            </el-select>
          </div>

        <div style="display: flex;align-items: center;margin-top: 16px;">
          <div style="margin-left: 32px;letter-spacing: 0.3em;">数&nbsp;量:</div>
          <div>
            <input type="number" v-model="couponNumber" placeholder="请输入数量" class="number-class" style="margin-left: 2px;">
          </div>
        </div>
      <span slot="footer" class="dialog-footer" >
        <button type="primary" @click="confirmCoupon" class="button">确定</button>
        <button @click="couponDialog = false" class="cancel">取消</button>
    </span>
    </el-dialog>
    

  </div>
</template>
<script>
import {getTagList,getAllCouponList} from "@/api/comman";
import {getAllChannel, getCustomList, setBlock, setChannel,setCoupon} from "@/api/custom";
import {downloadFile} from "@/utils/utils";
import SetTag from "@/components/SetTag/SetTag.vue";

export default  {
  components: {SetTag},
  name:"User",
  data() {
    return{
      tableData: [],
      channelOptions: [],
      selectChannel: '',
      selectCoupon:'',
      tagOptions: [],
      target: {},
      pageSize: 10,
      showSetTag: false,
      showSetChannel: false,
      couponDialog:false,
      couponInfo: {},
      pageNo: 1,
      total: 0,
      currentSelectInfo: {},
      param: {
        userNo: undefined,
        userName: undefined,
        kind: undefined,
        tags: []
      },
      couponList:[],
      couponNumber: null,
    }
  },
  created() {
    this.getAllTag()
    this.getTableData()
    this.getAllChannel()
  },
  methods: {
    downloadFile,
    getPageInit() {

    },
    handleClose() {
      this.showSetTag = false
      this.showSetChannel = false
      this.couponDialog = false
      this.getTableData()
    },
    getAllChannel() {
      getAllChannel().then(res => {
        if (res) {
          this.channelOptions = res.map(e => ({label: e.name, value: e.id}))
        }
      })
    },
    handleSetChannel(e) {
      this.currentSelectInfo = e
      this.showSetChannel = true
      this.selectChannel = null
    },

    handleCoupons(e){
      this.couponDialog = true;
      this.couponInfo = e;
      this.selectCoupon = null;
      this.couponNumber = null;
      // couponList
      getAllCouponList().then(res => {
        if (res) {
          this.couponList = res.map(e => ({label: e.name, value: e.id}))
        }
      })
    },
    confirmCoupon(){
      if(!this.selectCoupon) return this.$message.error('请选择优惠券')

      if(!this.couponNumber) return this.$message.error('请输入数量')
      const requestData = {
        userNo: this.couponInfo.userNo,
        couponId: this.selectCoupon,
        number: this.couponNumber
      }
      setCoupon(requestData).then((res) => {
        if(res){
          this.$message.success('操作成功')

          this.handleClose()
        }
      })
    },

    handleShowSetTag(e) {
      this.showSetTag = true
      this.target = e
    },
    cancelChannel(e) {
      setChannel({userNo: e.userNo, kind: 0}).then(res => {
        if (res) {
          this.$message.success('操作成功')
          // this.getTableData()
        }
      })
    },
    async setChannel() {
      if(!this.selectChannel) return this.$message.error('请选择渠道')
      const data = await setChannel({userNo: this.currentSelectInfo.userNo, kind: 1,id: this.selectChannel})
      if (data) {
        this.$message.success('操作成功')
        this.handleClose()
      }
    },
    getAllTag() {
      getTagList({kind: 'custom'}).then(res => {
        if (res) {
          this.tagOptions = res.map(e => ({value: e, label: e}))
        }
      })
    },
    handleSizeChange(e) {
      this.pageNo = e
      this.getTableData()
    },
    async handleSetStatus(e, status) {
      const data = await setBlock({userNo: e.userNo, kind: status})
      if (data) this.$message.success('操作成功！')
      this.getTableData()
    },
    reset() {
      this.param = {
        userNo: undefined,
        userName: undefined,
        kind: undefined,
        tags: []
      }
      this.pageNo = 1
      this.getTableData()
    },
    getTableData() {
      const requestParam = {
        pageSize: this.pageSize,
        pageNo: this.pageNo,
        param: this.param
      }
      getCustomList(requestParam).then(res =>{
        if (res) {
          this.total = res.count
          this.tableData = res.list
        }
      })

    }

  }
}
</script>
<style lang="scss" scoped>
@media(max-width: 768px){
  ::v-deep .el-dialog {
    width: 100vw !important;
  }
  .coupon-class{
    width: 64px !important;
  }
  .number-class{
    width: 150% !important;
  }
}
.coupon-class{
  margin-left: 32px;
  width: 46px;
}
.number-class{
  width: 390px;
  height: 40px;
  margin-left: 8px;
  border: 1px solid #CCCCCC;
  border-radius: 4px;
  padding: 16px;
}
input:focus{
    outline: none; 
    box-shadow: none; 
    border: 1px solid #CCCCCC;
  }
::v-deep .el-dialog__header {
  padding-top: 32px; 
}
::v-deep .el-dialog__wrapper .el-dialog {
  border-radius: 8px; 
}
::v-deep .el-dialog__title {
  color: #333333;
  font-size: 16px;
  font-weight: bold; 
  font-family: PingFang SC, PingFang SC;
  margin-left: 32px;
}
.dialog-footer{
  margin-right: 32px;
}
.button{
  width: 60px;
  height: 30px;
  background-color: #4169E1;
  border-radius: 4px;
  color: #FFFFFF;
  border: none;
  font-weight: 400;
  font-size: 14px;
  cursor: pointer;
}
.cancel{
  width: 60px;
  height: 30px;
  border: none;
  background-color: #EEEEEE;
  font-weight: 400;
  font-size: 14px;
  color: #666666;
  border-radius: 4px;
  margin-left: 8px;
  cursor: pointer;
}
.pageContainer {
  padding: 39px 32px;
  background: #FFFFFF;
}
.oneLineFlex {
  display: flex;
  align-items: center;
}
.inputStyle {
  width: 232px;
  ::v-deep.el-input__inner {
    border: 1px solid #CCCCCC !important;
  }
}
.input-class{
  width: 390px;
  
  ::v-deep.el-input__inner {
    border: 1px solid #CCCCCC !important;
  }
  margin-left: 8px;
}
.formLabel {
  margin-right: 8px;
  font-weight: 400;
  font-size: 14px;
  color: #666666;
}

::v-deep .el-table .cell .action {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: nowrap;
}
</style>
